<div class="panel-group" id="accordion" role="tablist">
    <!--显示文章列表-->
    <% texts.forEach(function (text,index) { %>
    <div class="panel panel-default">
        <div class="panel-heading" role="tab" id="headingOne">
            <h4 class="panel-title">
                <!--文章标题-->
                <!--onfocus="this.blur();"：当a被聚焦时强制取消焦点，可把周围的虚线去掉，也可以在里面内嵌span标签或者var标签也可以取消虚线-->
                <a class="titleStyle" onfocus="this.blur();" role="button" data-toggle="collapse" data-parent="#accordion" href="#<%= text.title %>">
                    标题：<i><%= text.title %></i>
                </a>
                <!--评论-->
                <a href="/comment/<%= text.name %>/<%= text.title %>/<%= text.time.second %>" class="pull-right comment">评论</a>
                <!--登录成功的用户才能进行删除自己发表的文章-->
                <% if(user&&user.name==text.name){ %>
                    <!--删除-->
                    <a href="/delete/<%= text.name %>/<%= text.title %>/<%= text.time.second %>" class="pull-right delete">删除</a>
                    <!--编辑-->
                    <a href="/edit/<%= text.name %>/<%= text.title %>/<%= text.time.second %>" class="pull-right edit">编辑</a>
                <% } %>
            </h4>
        </div>
        <!--显示详情-->
        <div id="<%= text.title %>" class="panel-collapse collapse" role="tabpanel">
            <div class="panel-body">
                <img class="authorimg" src="/userFile/<%= text.name %>.jpg" alt="发布文章的作者" onerror="this.src='/userFile/user.jpg'">
                <span class="titleName">作者：<i><a href="/author/<%= text.name %>"><%= text.name %></a></i></span>
                <span class="titleSecond">发表时间：<i><%= text.time.second %></i></span>
                <span class="titleLiulan">浏览次数：<i>122</i></span>
                <!--点赞、取消赞有问题，待解决，用ajax-->
                <!--点赞-->
                <% if(text.zan==0){ %>
                    <a href="/zan" class="glyphicon glyphicon-thumbs-up"></a><span class="zanText"><%= text.zan %></span>
                <% }else{ %>
                    <a href="/zan" class="glyphicon glyphicon-thumbs-up zanStyle"></a><span class="zanText"><%= text.zan %></span>
                <% } %>
                <!--取消赞-->
                <% if(text.buzan==0){ %>
                    <a href="/buzan" class="glyphicon glyphicon-thumbs-down"></a><span class="buzanText"><%= text.buzan %></span>

                <% }else{ %>
                <a href="/buzan" class="glyphicon glyphicon-thumbs-down zanStyle"></a><span class="buzanText"><%= text.buzan %></span>
                <% } %>
                <hr>
                <!--因为‘-’里面对里面的特殊字符会进行解析-->
                <%- text.content %>
            </div>
        </div>
    </div>
    <% }) %>
    <!--当有文章时，显示页码-->
    <% if(texts.length!=0){ %>
        <!--显示分页的页数-->
        <% include page %>
    <% }else{ %>
        <div class="panel-group">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title"></h3>
                </div>
                <div class="panel-body noneText text-center">
                    <h3><img src="/images/ku.gif" alt="哭的表情图片">暂无文章,空空如也...</h3>
                </div>
            </div>
        </div>
    <% } %>

</div>
<script>
    $(function () {
     $('.titleStyle').each(function (index,item) {
         $('.delete').eq(index).click(function (e) {
             //点击取消按钮时
             if(confirm('确认删除该文章吗？')==false){
                 //阻止默认事件
                 e.preventDefault();
             }
         })
       })
    });
    //点击浏览次数发送ajax请求
   $('.titleStyle').each(function (index,item) {
        $(this).click(function (e) {
            e.preventDefault();
            $.ajax({
                url:'/liulan',
                type:'get',
                data:{
                    name:$('.titleName i a').eq(index).html(),
                    second:$('.titleSecond i').eq(index).html()
                },
                success:function (data) {
                    //console.log(data.liulan);
                    $('.titleLiulan i').eq(index).html(Math.ceil(data.liulan/2));
                },
                error:function (xhr,textStatus,error) {
                    console.log(error);
                }
            })
        })
   })
    //点赞
    $('.glyphicon-thumbs-up').each(function (index,item) {
        $(this).click(function (e) {
            e.preventDefault();
            $.ajax({
                url:'/zan',
                type:'get',
                data:{
                    name:$('.titleName i a').eq(index).html(),
                    title:$('.titleStyle i').eq(index).html(),
                    second:$('.titleSecond i').eq(index).html()
                },
                success:function (data) {
                    $('.zanText').eq(index).html(data.zan+1);
                    $('.glyphicon-thumbs-up').eq(index).unbind('click');
                },
                error:function (xhr,textStatus,error) {
                    console.log(error);
                }
            })
        })
    })
    //不点赞
    $('.glyphicon-thumbs-down').each(function (index,item) {
        $(this).click(function (e) {
            e.preventDefault();
            $.ajax({
                url:'/buzan',
                type:'get',
                data:{
                    name:$('.titleName i a').eq(index).html(),
                    title:$('.titleStyle i').eq(index).html(),
                    second:$('.titleSecond i').eq(index).html()
                },
                success:function (data) {
                    $('.buzanText').eq(index).html(data.buzan+1);
                    $('.glyphicon-thumbs-down').eq(index).unbind('click');
                },
                error:function (xhr,textStatus,error) {
                    console.log(error);
                }
            })
        })
    })
</script>
